<template>
    <div class="agent-library-view">

        <div>
            <el-form>
                <!--        <el-form-item label="代理类型" prop="radio" style="width: 100%">-->
                <!--          <el-radio v-model="datas.agentType" label="agent" size="large" @change="radioChange">企业代理</el-radio>-->
                <!--          <el-radio v-model="datas.agentType" label="agent_person" size="large" @change="radioChange">兼职大包</el-radio>-->
                <!--        </el-form-item>-->

                <el-form-item>
                    <span class="">检索代理库意向代理业务有以下代理商匹配招商规划信息</span>
                </el-form-item>
            </el-form>
        </div>

        <el-table
                header-cell-class-name="table-header"
                :data="tableData"
                border
                size="medium"
                @selection-change="handleSelectionChange"
        >
            <el-table-column v-if="isSelect" :selectable="selectable" type="selection" width="55"/>
<!--            <el-table-column-->
<!--                    :show-overflow-tooltip="true"-->
<!--                    header-align="center"-->
<!--                    label="代理商编号"-->
<!--                    prop="agentNumber"-->
<!--            />-->
            <el-table-column
                    :show-overflow-tooltip="true"
                    header-align="center"
                    label="代理商名称"
                    prop="agentName"
            >
                <template #default="{row}">
                    <span v-if="row.agentType == 'agent'">{{ row.agentName }}</span>
                    <span v-else>{{ row.userName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    label="所在地区"
                    prop="region"
            >
                <template #default="{row}">
                    <span v-if="row.agentType == 'agent'">{{ row.provinceName }}/{{ row.cityName }}/{{ row.areaName }}</span>
                    <span v-else>{{ row.address }}</span>

                </template>
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    label="联系电话"
                    prop="region"
            >
                <template #default="{row}">

                </template>
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    label="意向代理地区"
                    prop="region"
            >
                <template #default="{row}">

                </template>
            </el-table-column>
            <el-table-column
                    :show-overflow-tooltip="true"
                    header-align="center"
                    label="其他描述"
                    prop="creatorName"
            />
            <el-table-column
                    :show-overflow-tooltip="true"
                    align="center"
                    label="代理商状态"
                    prop="terminalStatus"
            >
                <template #default="{row}">
                    {{ getLabel('agent_status', row.agentStatus) }}
                </template>
            </el-table-column>
        </el-table>
    </div>

</template>

<script>
    import {defineComponent, getCurrentInstance, inject, onMounted, reactive, toRefs} from 'vue'

    export default defineComponent({
        name: 'agentLibrary',
        props: {
            datas: {
                type: Object,
                default: {}
            },
            isSelect: {
                type: Boolean,
                default: false
            },
            list: {
                type: Array,
                default: []
            }
        },
        setup(props, context) {
            const currentInstance = getCurrentInstance()
            const api = inject('api')
            var data = reactive({
                tableData: [],
                formData: {
                    agentType: ''
                },
                selects: []
            })

            const getList = () => {
                api.plan.AGENT_LIST_BY_SEARCH(props.datas).then(res => {
                    if (!res.code) {
                        data.tableData = res.data.list
                    } else {
                        currentInstance.proxy.customMessage({type: 'error', message: res.msg})
                    }
                })
            }

            const selectable = (row) => {
                let index = props.list.findIndex(a => a.id == row.id)
                return index == -1
            }

            const handleSelectionChange = (val) => {
                data.selects = val
            }

            const radioChange = () => {
                getList()
            }

            onMounted(() => {
                getList()
            })

            return {
                ...toRefs(data),

                radioChange,
                selectable,
                handleSelectionChange
            }
        }
    })
</script>

<style scoped>

</style>
